<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function setLocalStorage(){
            localStorage.setItem("local", "我是localStorage");
        }
        function getLocalStorage(){
            var value = localStorage.getItem("local");
            console.debug(value);
        }
        function deleteLocalStorage(){
            localStorage.removeItem("local");
        }

        function setSessionStorage(){
            sessionStorage.setItem("session", "我是SessionStorage");
        }
        function getSessionStorage(){
            var value = sessionStorage.getItem("session");
            console.debug(value);
        }
        function deleteSessionStorage(){
            sessionStorage.removeItem("session");
        }

      /*  localStorage与sessionStorage的区别：
                localStorage设置的值，在多个窗体中都会存在，并且存储的数据是永久性存储，
                sessionStorage设置的值，只会在当前窗体生效，浏览器一旦关闭，数据就没有了

        localStorage与sessionStorage相同点：
                    1.都是把数据存储到浏览器上面
                */

    </script>
</head>
<body>
<button onclick="setLocalStorage()">localStorage设置值</button>
<button onclick="getLocalStorage()">localStorage获取值</button>
<button onclick="deleteLocalStorage()">localStorage删除值</button>
<hr/>
<button  onclick="setSessionStorage()">sessionStorage设置值</button>
<button onclick="getSessionStorage()">sessionStorage获取值</button>
<button onclick="deleteSessionStorage()">sessionStorage删除值</button>
</body>
</html>